<style lang="less" scoped>
  .case-chart{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
  }
</style>

<template>
  <div class="case-chart">
    <div class="case-chart_title">
      <span>{{ caseTitle }}(合计{{ caseTotal }}例)</span>
    </div>
    <div id="caseChart" class="case-chart_content" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDiagnosisStatistics, getDiagnosisStrokeStatistics, getTraumaMpdsStatistics } from '@/api/comprehensive/caseChart'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      setInter: null,
      caseTitle: '胸痛病例统计图',
      caseTotal: 0
    }
  },
  watch: {
    'isStrock'() {
      this.getCaseChart()
    }
  },
  mounted() {
    this.getCaseChart()
    this.setInter = setInterval(() => {
      this.getCaseChart()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    getCaseChart() {
      let myChart = echarts.init(document.getElementById('caseChart'))
      // myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      let arrData = []
      // this.caseTotal = 0
      if (this.isStrock == 'chestPain') {
        this.caseTitle = '胸痛病例统计图'
        getDiagnosisStatistics({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data) {
              this.caseTotal = res.data.sumDiag
              arrData = [res.data.countDiagNSTEMI, res.data.countDiagSTEMI, res.data.countDiagUA, res.data.countDiagNACSCCP, res.data.countDiagPE, res.data.countDiagAD, res.data.countDiagONCCP, res.data.countDiagOther, res.data.countDiagPending]
            }
            let option = {
              grid: {
                top: 0,
                left: '3%',
                right: '10%',
                bottom: '0',
                containLabel: true
              },
              xAxis: {
                show: false
              },
              yAxis: {
                type: 'category',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: '#59BCFB33'
                  }
                },
                axisLabel: {
                  color: '#fff'
                },
                data: ['NSTEMI', 'STEMI', 'UA', '非ACS心源性胸痛', '肺动脉栓塞', '主动脉夹层', '其他非心源性胸痛', '其他', '诊断中']
              },
              series: [{
                name: '病例',
                type: 'bar',
                barWidth: 10,
                label: {
                  formatter: '{c}例',
                  show: true,
                  color: '#fff',
                  position: 'right'
                },
                itemStyle: {
                  color: '#008CFF',
                  borderRadius: 1
                },
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(110, 193, 244, 0.2)'
                },
                data: arrData
              }]
            }
            myChart.setOption(option)
          }
        })
      } else if (this.isStrock == 'stroke') {
        this.caseTitle = '卒中病例统计图'
        getDiagnosisStrokeStatistics({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data) {
              this.caseTotal = res.data.sumDiag || 0
              arrData = [res.data.countDiagNGS || 0, res.data.countDiagNCX || 0, res.data.countDiagDML || 0, res.data.countDiagJDMXJ || 0]
            }
            let option = {
              grid: {
                top: 0,
                left: '3%',
                right: '10%',
                bottom: '0',
                containLabel: true
              },
              xAxis: {
                show: false
              },
              yAxis: {
                type: 'category',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: '#59BCFB33'
                  }
                },
                axisLabel: {
                  color: '#fff'
                },
                data: ['脑梗死', '脑出血', '动脉瘤', '劲动脉狭窄或闭塞']
              },
              series: [{
                name: '病例',
                type: 'bar',
                barWidth: 10,
                label: {
                  formatter: '{c}例',
                  show: true,
                  color: '#fff',
                  position: 'right'
                },
                itemStyle: {
                  color: '#008CFF',
                  borderRadius: 1
                },
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(110, 193, 244, 0.2)'
                },
                data: arrData
              }]
            }
            myChart.setOption(option)
          }
        })
      } else if (this.isStrock == 'trauma') {
        this.caseTitle = '创伤病例统计图'
        getTraumaMpdsStatistics({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data) {
              this.caseTotal = res.data.sumMpds || 0
              arrData = [res.data.countMpds1 || 0,
                res.data.countMpds2 || 0,
                res.data.countMpds3 || 0,
                res.data.countMpds4 || 0,
                res.data.countMpds5 || 0,
                res.data.countMpds6 || 0,
                res.data.countMpds7 || 0,
                res.data.countMpds8 || 0,
                res.data.countMpds9 || 0,
                res.data.countMpds10 || 0
              ]
            }
            let option = {
              grid: {
                top: 0,
                left: '3%',
                right: '10%',
                bottom: '0',
                containLabel: true
              },
              xAxis: {
                show: false
              },
              yAxis: {
                type: 'category',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: '#59BCFB33'
                  }
                },
                axisLabel: {
                  color: '#fff'
                },
                data: ['交通/运输事故', '高处坠落', '暴力袭击/侵犯', '动物咬伤/攻击', '烧伤/烫伤/爆炸伤', '锐器刺伤/枪伤/贯穿伤', '触电/雷击伤', '冬季运动损伤', '机械损伤', '其他创伤']
              },
              series: [{
                name: '病例',
                type: 'bar',
                barWidth: 10,
                label: {
                  formatter: '{c}例',
                  show: true,
                  color: '#fff',
                  position: 'right'
                },
                itemStyle: {
                  color: '#008CFF',
                  borderRadius: 1
                },
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(110, 193, 244, 0.2)'
                },
                data: arrData
              }]
            }
            myChart.setOption(option)
          }
        })
      }
    }
  }
}
</script>
